<template>
  <view class="home-container">
    <view class="content" v-if="isSkeleton">
      <s-card
        v-for="(item, index) in itemList"
        :item="item"
        :key="index"
        @detail="onDetail"
      />
    </view>
    <s-skeleton :node="rectNodes" :show="!isSkeleton" />
    <s-tool type="map" @map="onMap" />
  </view>
</template>
<script>
export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      isSkeleton: false,
      itemList: [
        {
          id: 1,
          username: 'Boy Lee',
          picUrl:
            'https://picx.zhimg.com/v2-ab5998b2315433a05a2cc58877f651e8_im.jpg?source=32738c0c',
          sex: 1,
          star: true,
          type: 1, //1 租客 2 房东
          age: 22,
          count: 2,
          desc: '非常漂亮的两房户型，独立卫生间，冰箱、洗衣机、空调、Wifi、1房间闲置求合租。',
          money: 899,
          payDateType: 1, //1 月度 2季度 3年度
          state: true, // 状态
          time: 7,
          isVerified: true,
          picList: [
            'https://pic1.zhimg.com/80/v2-2296fb2bbd988fc36bbeb3afba87a949_1440w.jpg?source=1940ef5c',
            'https://pic1.zhimg.com/80/v2-2296fb2bbd988fc36bbeb3afba87a949_1440w.jpg?source=1940ef5c',
            'https://pic1.zhimg.com/80/v2-2296fb2bbd988fc36bbeb3afba87a949_1440w.jpg?source=1940ef5c',
            'https://pic1.zhimg.com/80/v2-2296fb2bbd988fc36bbeb3afba87a949_1440w.jpg?source=1940ef5c',
          ],
        },
        {
          id: 2,
          username: 'Susie Jenkins',
          picUrl:
            'https://picx.zhimg.com/v2-ab5998b2315433a05a2cc58877f651e8_im.jpg?source=32738c0c',
          sex: 0, // 0 女 1男 2保密
          star: false,
          type: 1, //1 租客 2 房东
          age: 28,
          count: 1,
          desc: '非常漂亮的两房户型，独立卫生间，1房间闲置求合租。',
          money: 1700,
          payDateType: 2, //1 月度 2季度 3年度
          state: true, // 状态
          time: 7,
          isVerified: true,
          picList: [
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
          ],
        },
        {
          id: 3,
          username: 'Jeremy Lawrence',
          picUrl:
            'https://picx.zhimg.com/v2-ab5998b2315433a05a2cc58877f651e8_im.jpg?source=32738c0c',
          sex: 0,
          star: false,
          type: 2, //1 租客 2 房东
          age: 22,
          count: 2,
          desc: '非常漂亮的两房户型，独立卫生间，1房间闲置求合租。',
          money: 899,
          payDateType: 1, //1 月度 2季度 3年度
          state: true, // 状态
          time: 7,
          isVerified: true,
          picList: [
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
            'https://pica.zhimg.com/80/v2-78c68e9e48bda346d1857c534e64029f_1440w.jpg?source=1940ef5c',
          ],
        },
      ],
      rectNodes: [
        {
          id: '',
          dataset: {},
          left: 48 / 2,
          right: 0,
          top: 24 / 2,
          radius: 80 / 2,
          bottom: 32,
          width: 80 / 2,
          height: 80 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 160 / 2,
          right: 0,
          top: 35 / 2,
          bottom: 32,
          width: 187 / 2,
          height: 21 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 364 / 2,
          right: 0,
          top: 32 / 2,
          bottom: 32,
          width: 24 / 2,
          height: 28 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 166 / 2,
          right: 0,
          top: 74 / 2,
          bottom: 32,
          width: 21 / 2,
          height: 30 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 201 / 2,
          right: 0,
          top: 78 / 2,
          bottom: 32,
          width: 29 / 2,
          height: 21 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 250 / 2,
          right: 0,
          top: 86 / 2,
          bottom: 32,
          radius: 6 / 2,
          width: 6 / 2,
          height: 6 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 275 / 2,
          right: 0,
          top: 76 / 2,
          bottom: 32,
          width: 50 / 2,
          height: 25 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 670 / 2,
          right: 0,
          top: 48 / 2,
          bottom: 32,
          width: 32 / 2,
          height: 8 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 0,
          right: 360.20001220703125,
          top: 60,
          bottom: 171,
          width: 375,
          height: 480 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 52 / 2,
          right: 0,
          top: 642 / 2,
          bottom: 373,
          width: 24 / 2,
          height: 28 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 89 / 2,
          right: 183,
          top: 647 / 2,
          bottom: 533,
          width: 99 / 2,
          height: 20 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 209 / 2,
          right: 0,
          top: 647 / 2,
          bottom: 457,
          width: 37 / 2,
          height: 20 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 49 / 2,
          right: 0,
          top: 697 / 2,
          bottom: 532,
          width: 631 / 2,
          height: 78 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 49 / 2,
          right: 0,
          top: 789 / 2,
          bottom: 532,
          width: 65 / 2,
          height: 26 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 131 / 2,
          right: 0,
          top: 789 / 2,
          bottom: 532,
          width: 50 / 2,
          height: 26 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 51 / 2,
          right: 0,
          top: 832 / 2,
          bottom: 532,
          width: 100 / 2,
          height: 25 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 172 / 2,
          right: 0,
          top: 842 / 2,
          bottom: 532,
          radius: 6 / 2,
          width: 6 / 2,
          height: 6 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 193 / 2,
          right: 0,
          top: 832 / 2,
          bottom: 532,
          width: 117 / 2,
          height: 25 / 2,
        },

        // 第二个
        {
          id: '',
          dataset: {},
          left: 48 / 2,
          right: 0,
          top: 948 / 2,
          radius: 80 / 2,
          bottom: 32,
          width: 80 / 2,
          height: 80 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 160 / 2,
          right: 0,
          top: 961 / 2,
          bottom: 32,
          width: 187 / 2,
          height: 21 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 364 / 2,
          right: 0,
          top: 956 / 2,
          bottom: 32,
          width: 24 / 2,
          height: 28 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 166 / 2,
          right: 0,
          top: 998 / 2,
          bottom: 32,
          width: 21 / 2,
          height: 30 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 201 / 2,
          right: 0,
          top: 1002 / 2,
          bottom: 32,
          width: 29 / 2,
          height: 21 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 250 / 2,
          right: 0,
          top: 1010 / 2,
          bottom: 32,
          radius: 6 / 2,
          width: 6 / 2,
          height: 6 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 275 / 2,
          right: 0,
          top: 1000 / 2,
          bottom: 32,
          width: 50 / 2,
          height: 25 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 670 / 2,
          right: 0,
          top: 984 / 2,
          bottom: 32,
          width: 32 / 2,
          height: 8 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 0,
          right: 0,
          top: 1052 / 2,
          bottom: 171,
          width: 375,
          height: 480 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 52 / 2,
          right: 0,
          top: 642 / 2,
          bottom: 373,
          width: 24 / 2,
          height: 28 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 89 / 2,
          right: 183,
          top: 647 / 2,
          bottom: 533,
          width: 99 / 2,
          height: 20 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 209 / 2,
          right: 0,
          top: 647 / 2,
          bottom: 457,
          width: 37 / 2,
          height: 20 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 49 / 2,
          right: 0,
          top: 697 / 2,
          bottom: 532,
          width: 631 / 2,
          height: 78 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 49 / 2,
          right: 0,
          top: 789 / 2,
          bottom: 532,
          width: 65 / 2,
          height: 26 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 131 / 2,
          right: 0,
          top: 789 / 2,
          bottom: 532,
          width: 50 / 2,
          height: 26 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 51 / 2,
          right: 0,
          top: 832 / 2,
          bottom: 532,
          width: 100 / 2,
          height: 25 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 172 / 2,
          right: 0,
          top: 842 / 2,
          bottom: 532,
          radius: 6 / 2,
          width: 6 / 2,
          height: 6 / 2,
        },
        {
          id: '',
          dataset: {},
          left: 193 / 2,
          right: 0,
          top: 832 / 2,
          bottom: 532,
          width: 117 / 2,
          height: 25 / 2,
        },
      ],
    };
  },
  created() {},
  onPullDownRefresh() {
    uni.showToast({
      title: '下拉刷新了！',
      icon: 'none',
    });
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    onMap() {
      uni.navigateTo({
        url: `/pages/home/map/index`,
      });
    },
    onDetail() {
      uni.navigateTo({
        url: `/pages/home/detail/index`,
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f6f8ff;
}
</style>
<style lang="scss" scoped>
.home-container {
  width: 100%;
}
</style>
